import React, { useEffect } from 'react';
import { Button, Modal, Icon, NavBar } from 'antd-mobile';
import {
  QrcodeOutlined,
  DownSquareOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { useState } from 'react';
import { connect, history, useRequest } from 'umi';
import styles from './index.less';
import judgebind from '@/utils/judgebind';
import IconFont from '@/components/IconFont';
import { unbind } from '@/services/login';

const alert = Modal.alert;

let Center = (props) => {
  let [visible, cv] = useState(false),
    {
      global: { userinfo },
      location,
    } = props;

  return (
    <div className="bg">
      <div
        className="totitle"
        style={{
          backgroundImage: `url(${require('@/assets/centerbg.png')})`,
        }}
      >
        <img
          src={require('@/assets/centerbg.png')}
          style={{ width: '100%', opacity: 0, height: 'auto' }}
          alt=""
        />
        <div
          style={{
            backgroundImage: `url(${
              userinfo?.head_image
                ? userinfo?.head_image
                : require('@/assets/user.png')
            })`,
            width: '26vw',
            height: '26vw',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            backgroundSize: !userinfo?.head_image ? '46% auto' : 'contain',
            borderRadius: 500,
            backgroundColor: '#fff',
            position: 'absolute',
            bottom: '-12vw',
            left: 0,
            right: 0,
            margin: 'auto',
            boxShadow: '0px 0px 8px rgba(194,216,230,0.3)',
          }}
        ></div>
      </div>
      <div
        style={{
          marginTop: '14vw',
          textAlign: 'center',
          color: '#333',
          fontSize: 20,
        }}
      >
        {userinfo?.real_name ? (
          userinfo?.real_name
        ) : (
          <div
            onClick={() => {
              judgebind(!userinfo?.real_name, location.pathname);
            }}
          >
            请绑定
          </div>
        )}
        <br />
        <span style={{ fontSize: 14, color: '#999' }}>
          {userinfo?.areas
            ? userinfo?.areas.map((it) => (
                <span style={{ padding: '2px 4px' }}>{it.name}</span>
              ))
            : '-'}
        </span>
      </div>

      <div className={styles.list}>
        <div
          className={styles.item}
          onClick={() => {
            history.push('/changephone');
          }}
        >
          <div className="center">
            <img
              src={require('@/assets/center_1.png')}
              style={{ width: 16 }}
              alt=""
            />
            <span style={{ textIndent: 12 }}>更换手机号</span>
          </div>

          <span className="rows" style={{ color: '#0363fe' }}>
            <Icon type="right"></Icon>
          </span>
        </div>

        <div
          className={styles.item}
          onClick={() => {
            alert('解绑账号', '是否立即解绑当前账号?', [
              { text: '取消', onPress: () => console.log('cancel') },
              {
                text: '解绑',
                onPress: () => {
                  unbind({}).then((res) => {
                    if (res.code == 0) {
                      history.replace('/auth');
                    }
                  });
                },
              },
            ]);
          }}
        >
          <div className="center">
            <img
              src={require('@/assets/center_2.png')}
              style={{ width: 18 }}
              alt=""
            />
            <span style={{ textIndent: 10 }}>解绑账号</span>
          </div>

          <span className="rows" style={{ color: '#0363fe' }}>
            <Icon type="right"></Icon>
          </span>
        </div>

        <div className={styles.item} onClick={() => {}}>
          <div className="center">
            <img
              src={require('@/assets/center_3.png')}
              style={{ width: 18 }}
              alt=""
            />
            <span style={{ textIndent: 10 }}>当前版本号</span>
          </div>

          <span className="rows" style={{ color: '#0363fe' }}>
            v1.0.0
          </span>
        </div>
      </div>
    </div>
  );
};
export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Center);
